<template>
	<up-popup :show="showPopup" :safe-area-inset-bottom="true" mode="bottom" :round="16" @close="closePopup">
		<view class="popup-bottom-container">
			<view class="popup-header">使用明细</view>
			<view class="popup-close" @click="closePopup"></view>
			<view class="popup-content safe-bottom-wrap ticket-rule">
				<view class="m-20">
					<view class="mt-16 bg-white mb-16 info-wrap" v-for="(item, index) in listData" :key="index">
						<view class="info-item">
							<view class="info-title">使用时间</view>
							<view class="info-content">{{ item.create_time }}</view>
						</view>
						<view class="info-item">
							<view class="info-title">数量</view>
							<view class="info-content">{{ item.quantity }}份</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</up-popup>
</template>
<script setup lang="ts">
const props = defineProps({
	modelValue: Boolean,
	listData: {
		type: Array,
		default: [],
	},
})
const emit = defineEmits(["update:modelValue"])

const showPopup = ref(props.modelValue)
watch(
	() => props.modelValue,
	(newVal) => {
		showPopup.value = !!newVal
	}
)

// 处理关闭按钮点击
const closePopup = () => {
	showPopup.value = false
	emit("update:modelValue", false)
}
</script>

<style scoped lang="scss">
.popup-bottom-container {
	background: $grey;
	.popup-content {
		height: 50vh;
		max-height: 50vh;
	}
	.popup-content.safe-bottom-wrap {
		padding-bottom: 50rpx;
	}
}
.info-wrap {
	font-size: 28rpx;
	padding: 32rpx 0 32rpx 24rpx;
	border-radius: 16rpx;

	.info-item {
		display: flex;
		padding-bottom: 28rpx;

		&:last-child {
			padding-bottom: 0;
		}
		.info-title {
			width: 150rpx;
			color: $c-grey-86;
		}

		.info-content {
			flex: 1;
			color: #1d2129;
		}
	}
}
</style>
